{% extends "base.html" %}

{% block stylesheets %}
<style>
  .embed-responsive-a {
      padding-top: 141.42%;
  }

  .comment {
      border-color: inherit;
      box-shadow: inherit;
  }
</style>
{% endblock %}

{% block content %}
<div class="jumbotron">
  <div class="container">
    <h1>Writeups</h1>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-2 offset-md-1">
      <div class="nav flex-column nav-pills" role="tablist">
        <a class="nav-link active" id="upload-tab" data-toggle="pill" href="#writeups-upload" role="tab">Upload</a>
        {% for week in weeks %}
	<a class="nav-link" id="writeups-week{{ loop.index }}-tab" data-toggle="pill" href="#writeups-week{{ loop.index }}" role="tab">Writeup #{{ loop.index }}</a>
        {% endfor %}
      </div>
    </div>
    <div class="col-md-8">
      <div class="tab-content" id="v-pills-tabContent">
	<div class="tab-pane fade show active" id="writeups-upload" role="tabpanel">
          <h2>Upload</h2>
          <br>
          {% if countdown %}
          <h3>{{ countdown }}</h3>
          <br>
          {% endif %}
          <form method="post" enctype="multipart/form-data">
            <div class="row">
              <input name="nonce" type="hidden" value="{{ Session.nonce }}">
	      <div class="col-md-6">
                <input type="file" name="writeup" accept="application/pdf">
              </div>
	      <div class="col-md-6">
                <input type="submit" value="Upload">
              </div>
            </div>
          </form>
        </div>
        {% for week, (writeup, comment) in weeks.items() %}
	<div class="tab-pane fade" id="writeups-week{{ loop.index }}" role="tabpanel">
          <h2>Writeup #{{ loop.index }}</h2>
          <br>
          {% if writeup %}
          {% if comment %}
          <h3>{{ "Accepted" if comment.accepted else "Rejected" }}</h3>
          {% endif %}
          <div class="embed-responsive embed-responsive-a">
            <embed data-src="/writeups/{{ writeup.id }}">
          </div>
          {% if comment %}
          <textarea readonly class="form-control comment" rows="2">{{ comment.content }}</textarea>
          {% endif %}
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script defer src="{{ url_for('views.themes', path='js/dojo/writeups.js') }}"></script>
{% endblock %}
